<template>
  <div class>
    <!--面包屑-->
    <Breadcrumb :Breadcrumb="Breadcrumb"></Breadcrumb>
    <div class="top" v-if="number=1">
      <div class="left"></div>
      <div class="center">举报的详情页这里展示举报的标题</div>
      <div class="right"></div>
    </div>
    <div class="topBox" v-else>
      <h2>被举报人</h2>
      <div class="title">
        <h3>公司汇报任务时的汇报主题展示</h3>
        <span>汇报时间 :</span>
        <span>2019-10-11 12:30:26</span>
      </div>
    </div>
    <div class="banner">
      <h2>被举报人</h2>
      <div class="first">
        <div class="a">被举报人</div>
        <div class="b">冯宝宝</div>
        <div class="a">被举报人单位</div>
        <div class="b">哪都通</div>
        <div class="a">被举报人职务</div>
        <div class="b">临时工</div>
      </div>
      <div class="first">
        <div class="a">当前状态</div>
        <div class="b">已受理</div>
        <div class="a">级别</div>
        <div class="b">博士</div>
        <div class="a">问题类型</div>
        <div class="b">违反组织纪律</div>
      </div>
      <div class="first">
        <div class="a">问题细类</div>
        <div class="c">违反政治纪律</div>
      </div>
    </div>

    <!-- 问题清单附件 -->
    <div class="item_wrap">
      <div class="title_wrap hasbutton">
        <div class="left">
          <div class="line"></div>
          <div class="title">举报详情</div>
        </div>
      </div>
      <div
        class="texta"
      >如须与程保山级见达造统安山价争该着布见选史育每马增容运织习细酸亲发比很我上数儿水半点成每较科属规消些很百他那飞。适现难少技业适劳总身里市维支究她军农太总八进来认通东习大阶或人第口精报快华着格法完转格示进相走从组直为众有使花电位格府花们万务别只联离育数统消养图象理于。电才干政委到具段被带感按开把列法际子值起马可相六一住层响极下原素月变造报专联件西作温能照市入布已节计由片。要提联百接同斯形等调满代流消置消业少厂南始收强且济同识变常定影叫效且没省的万应院共受社样素新精存细口多统海划情现张毛其难本处便信据才始立须家省边而标局。全它二空间养及单广可色选养技手求从那者米老任儿数结动领并造因素别太共值万意比活事么体应白工度设。研产段拉问第包意空率就育照位数马保例议参委非目近部两精个类影长安时何手两基接东市步飞引队第务。许着育管上东片一水内经和除众图对太体六况专军日统没只织复前以各消等府当比除商布亲己即支器想难风革少想务也山或入广回连阶正天心济书报至水很比没条火军级。当事北制他斯型展造准必即感心真百连导样书格共年数决厂长二见开持当心住所身么中天。组议正目队合目路七验产明劳每型府群且离但计大整过科特标情厂领转场者同规持并复前点候太样公八变二设平分西成并大。</div>
      <div v-if="fileList.length == 0" class="note">暂无附件</div>
      <div v-else class="fileList">
        <div v-for="(item, index) in fileList" :key="index">
          <div class="file_item">
            <img class="left" :src="pdf" alt />
            <div class="right">
              <div class="title">{{ item.name }}</div>
              <div class="done_wrap">
                <div class="size">{{ item.size }}</div>
                <div class="innerRight">
                  <div>
                    <img class="image1" :src="preview" alt />
                    <span>预览</span>
                  </div>
                  <span class="done">|</span>
                  <div>
                    <img class="image1" :src="download" alt />
                    <span>下载</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="del">
              <i class="el-icon-close"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--举报人信息 -->
      <div class="banner">
      <h2>举报人信息</h2>
      <div class="first">
        <div class="a">被举报人</div>
        <div class="b">冯宝宝</div>
        <div class="a">身份证号</div>
        <div class="b"></div>
        <div class="a">联系方式</div>
        <div class="b"></div>
      </div>
      <div class="first">
        <div class="a">政治面貌</div>
        <div class="b"></div>
        <div class="a">现居地址</div>
        <div class="b"></div>
        <div class="a">级别</div>
        <div class="b">违反组织纪律</div>
      </div>
        <div class="first">
        <div class="a">举报时间</div>
        <div class="b">举报时间</div>
        <div class="a">举报方式</div>
        <div class="b">实名举报</div>
        <div class="a">举报渠道</div>
        <div class="b">二维码</div>
      </div>
      <div class="first">
        <div class="a">二维码</div>
        <div class="c">23SDIU8</div>
      </div>
    </div>
<!-- 审批意见 -->
  <div class="banner">
      <h2>审批意见</h2>
      <div class="first">
        <div class="a">审批时间</div>
        <div class="b">2019-09-25 16:10:20</div>
        <div class="a">审批人</div>
        <div class="b">王磊</div>
        <div class="a">审批结果</div>
        <div class="b">已受理</div>
      </div>
   
      <div class="first">
        <div class="f">审批意见</div>
        <div class="d">通过</div>
      </div>
    </div>
<!-- 审批意见 -->
    <div class="footer">

  <el-button type="primary" class="button" @click="daochu">导出</el-button>
      </div>
      <div class="last"></div>
  </div>
</template>
<script>
//面包靴
import Breadcrumb from "@/components/IncorruptibleArchives/Breadcrumb.vue";
// import BaiduMap from "vue-baidu-map/components/map/Map.vue";
export default {
  components: {
    Breadcrumb,
    // BaiduMap,
  },
  data() {
    return {
      pdf: require("@/assets/image/pdf.png"),
      preview: require("@/assets/image/preview.png"),
      download: require("@/assets/image/download.png"),

      fileList: [
        {
          name: "这里是文档名称.PDF",
          size: "11.6M",
        },
      ],
      number: "",
      //面包靴跳转数据
      Breadcrumb: [
        {
          name: "廉政档案",
          link: "IncorruptibleArchives",
        },
        {
          name: "监督对象",
          link: "supervise",
        },
        {
          name: "监督对象详情",
          link: "supervisedetail",
        },
         {
          name: "信访举报查看",
          link: "LetterLookO",
        },
         
      ],
    };
  },
  created() {
    let number = this.$route.query.number;
  },
  mounted() {},
  methods: {
       daochu(){
     this.$router.go(-1);
  },
   handler({ BMap, map }) {
    console.log(BMap, map);
    this.center.lng = 116.404;
    this.center.lat = 39.915;
    this.zoom = 15;
  },
  uploadSuccess(file) {
    console.log(file);
  },
  },
 
 
};
</script>
<style lang="less" scoped>
.banner {
  width: 100%;
  min-height: 226px;
  background: white;
  padding: 33px 40px;
  box-sizing: border-box;
}
.pic {
  width: 100px;
  height: 100px;
}
.pic img {
  width: 100px;
  height: 100px;
}
.companyName h3 {
  font-size: 30px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 30px;
  margin: 20px 0;
}
.box1 {
  margin-top: 20px;
  display: flex;
}
.text {
  width: 1418px;
  height: 100px;
}
.a {
  width: 80px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 36px;
}

h2 {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: rgba(51, 51, 51, 1);
  line-height: 16px;
  border-left: 4px solid #3d7fff;
  padding: 0 0 0 10px;
  margin-bottom: 39px;
}
.item_wrap {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 10px;
  margin-top: 20px;

  .title_wrap {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .line {
      width: 4px;
      height: 14px;
      background: #3d7fff;
    }
    .title {
      font-weight: 500;
      margin: 0 10px;
      font-size: 16px;
      color: #333;
    }
  }
  .content_wrap {
    display: flex;
    .item {
      display: flex;
      align-items: center;
      margin-right: 60px;
      .name {
        font-style: 14px;
        font-weight: 500;
        color: #333;
        margin-right: 10px;
      }
      .el-select,
      .el-input {
        width: 320px;
        // height: 36px;
      }
    }
  }
}
.hasbutton {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    align-items: center;
  }
  .el-button {
    width: 70px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(61, 127, 255, 1);
    border-radius: 4px;
    text-align: center;
    line-height: 30px;
    color: #3d7fff;
  }
}
.note {
  font-size: 14px;
  color: #999;
}
.classInput {
  /deep/.el-input__inner {
    text-align: center;
  }
}
.done {
  margin: 0 10px;
}
.time {
  display: flex;
  align-items: center;
}

.button_wrap {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 100px;
  right: 0;
  z-index: 99;
  text-align: right;
  padding: 10px 20px;
  .el-button {
    margin-left: 10px;
  }
}
.fileList {
  display: flex;
  flex-wrap: wrap;
}
.file_item {
  position: relative;
  width: 360px;
  height: 80px;
  border-radius: 4px;
  border: 1px solid rgba(221, 221, 221, 1);
  margin-right: 20px;
  margin-bottom: 20px;
  padding: 15px;
  display: flex;
  .left {
    width: 50px;
    height: 50px;
    margin-right: 15px;
  }
  .right {
    font-size: 14px;
    .title {
      color: #333;
      margin-bottom: 10px;
    }
    .done_wrap {
      display: flex;
      align-items: center;
      .size {
        color: #999;
        margin-right: 110px;
      }
      .innerRight {
        text-align: right;
        color: #3d7fff;
        display: flex;
        align-items: center;
      }
    }
  }
  .del {
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background: rgba(204, 204, 204, 1);
    border-radius: 50%;
    position: absolute;
    right: 5px;
    top: 5px;
  }
}
.top {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 95px;
  margin-bottom: 27px;
}
.top .left {
  width: 30px;
  height: 1px;
  background: rgba(51, 51, 51, 1);
}
.top .center {
  height: 30px;
  font-size: 22px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 30px;
  margin: 0 5px;
}
.top .right {
  width: 30px;
  height: 1px;
  background: rgba(51, 51, 51, 1);
}
.banner p {
  text-indent: 2em;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 26px;
}

.topBox .title {
  width: 100%;
  text-align: center;
  margin: 20px 0px 0px;
}
.title h3 {
  font-size: 26px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 37px;
}
.title span {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 22px;
}
.topBox {
  padding: 20px;
  width: 100%;
  background: white;
  box-sizing: border-box;
}
.first {
  width: 100%;
  display: flex;
}
.first .a {
  width: 140px;
  height: 46px;
  background: rgba(250, 250, 250, 1);
  border: 1px solid rgba(232, 232, 232, 1);
  line-height: 46px;
  padding: 0 10px;
  box-sizing: border-box;
}
.first .b {
  width: 373px;
  height: 46px;
  border: 1px solid rgba(232, 232, 232, 1);
  line-height: 46px;
  padding: 0 10px;
  box-sizing: border-box;
}
.first .c {
  width: 1400px;
  height: 46px;
  border: 1px solid rgba(232, 232, 232, 1);
  line-height: 46px;
  padding: 0 10px;
  box-sizing: border-box;
}
.texta {
  margin-bottom: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 26px;
}
.first .d{
      width: 1400px;
  height:80px;
  border: 1px solid rgba(232, 232, 232, 1);
  line-height: 46px;
  padding: 0 10px;
  box-sizing: border-box;
}
.first .f{
  width: 140px;
  height:80px;
  background: rgba(250, 250, 250, 1);
  border: 1px solid rgba(232, 232, 232, 1);
  line-height: 46px;
  padding: 0 10px;
  box-sizing: border-box;
}
.footer{
 
    width: 101.5%;
    height: 56px;
    background:white;
  margin-left: -20px;
  position: fixed;
  bottom: 0px;
  
  right:20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.last{
    width: 100%;
    height: 56px;
}
.button{
    width: 70px;
    height: 36px;
    margin-right: 20px;
}
</style>